<template>
  <div>
    <el-table
      :data="bookLaboratoryList"
      :stripe="true"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号">
      </el-table-column>
      <el-table-column
        label="教室名称">
        <template slot-scope="scope">
          {{scope.row.laboratory.name}}
        </template>
      </el-table-column>
      <el-table-column
        prop="bookDate"
        label="预定时间">
      </el-table-column>
      <el-table-column
        label="预定老师">
        <template slot-scope="scope">
          {{scope.row.teacher.name}}
        </template>
      </el-table-column>
      <el-table-column
        prop="startDate"
        label="开始时间">
      </el-table-column>
      <el-table-column
        prop="endDate"
        label="结束时间">
      </el-table-column>
      <el-table-column
        label="审核状态">
        <template slot-scope="scope">
          <div v-if="scope.row.state==0">未审核</div>
          <div v-if="scope.row.state==1">审核通过</div>
          <div v-if="scope.row.state==2">审核未通过</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="description"
        label="预定原因">
      </el-table-column>

      <el-table-column
        label="操作" v-if="role==3">
        <template slot-scope="scope">
          <el-button size="mini" @click="updateState(scope.row.id,1)">通过</el-button>
          <el-button size="mini" @click="updateState(scope.row.id,2)">不通过</el-button>
        </template>
      </el-table-column>
    </el-table>
    <router-view/>
  </div>
</template>

<script>
    export default {
        name: "BookLaboratoryList",
      data(){
          return {
            bookLaboratoryList:[],
            bookLaboratory:{},
            role:sessionStorage.getItem("role")
          }
      },
      created(){
        this.selectAll();
      },
      methods: {
        selectAll(){
          this.axios.get("/bookLaboratory/selectAll").then((resp)=>{
            this.bookLaboratoryList=resp.data;
          });
        },
        updateState(id,state){
          this.bookLaboratory.id=id;
          this.bookLaboratory.state=state;
          this.axios.put("/bookLaboratory/updateState",this.bookLaboratory).then((resp)=>{
            this.$message.success("审核完成！");
            this.selectAll();
          });
        }
      }
    }
</script>

<style scoped>

</style>
